<template>
  <el-card shadow="never">
      <!-- 搜索栏 -->
      <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
            <el-option label="正常" value="1" />
            <el-option label="停用" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 操作按钮 -->
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="info" plain icon="Sort" @click="toggleExpandAll">展开/折叠</el-button>
        </el-col>
      </el-row>

      <!-- 树形表格 -->
      <el-table
        v-if="refreshTable"
        v-loading="loading"
        element-loading-text="加载中111..."
        :data="menuList"
        row-key="menuId"
        :default-expand-all="isExpandAll"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="200" />
        <el-table-column prop="icon" label="图标" align="center" width="100">
          <template #default="scope">
            <el-icon v-if="scope.row.icon && scope.row.icon !== '#'">
              <component :is="scope.row.icon" />
            </el-icon>
          </template>
        </el-table-column>
        <el-table-column prop="orderNum" label="排序" width="80" />
        <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true" />
        <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true" />
        <el-table-column prop="visible" label="显示状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.visible === '1' ? 'success' : 'info'">
              {{ scope.row.visible === '1' ? '显示' : '隐藏' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="菜单状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === '1' ? 'success' : 'danger'">
              {{ scope.row.status === '1' ? '正常' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template #default="scope">
            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
            <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)">新增</el-button>
            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加或修改菜单对话框 -->
    <el-dialog v-model="open" :title="title" width="680px" append-to-body>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级菜单">
              <el-tree-select
                v-model="form.parentId"
                :data="menuOptions"
                :props="{ value: 'menuId', label: 'menuName', children: 'children' }"
                value-key="menuId"
                placeholder="选择上级菜单"
                check-strictly
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="菜单类型" prop="menuType">
              <el-radio-group v-model="form.menuType" @change="handleMenuTypeChange">
                <el-radio label="M">目录</el-radio>
                <el-radio label="C">菜单</el-radio>
                <el-radio label="F">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="menuName">
              <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单图标" prop="icon">
              <el-popover 
                v-model:visible="iconPopoverVisible"
                placement="bottom-start" 
                :width="600" 
                trigger="click" 
                popper-class="icon-selector-popover"
                :append-to-body="true"
              >
                <template #reference>
                  <el-input v-model="form.icon" placeholder="请选择图标" readonly>
                    <template #prepend>
                      <el-icon v-if="form.icon && form.icon !== '#'">
                        <component :is="form.icon" />
                      </el-icon>
                      <span v-else>图标</span>
                    </template>
                    <template #suffix>
                      <el-icon><ArrowDown /></el-icon>
                    </template>
                  </el-input>
                </template>
                <div class="icon-selector" @click.stop>
                  <el-tabs v-model="activeIconTab" type="card">
                    <el-tab-pane label="系统" name="system">
                      <div class="icon-grid">
                        <div 
                          v-for="icon in systemIcons" 
                          :key="icon"
                          class="icon-item"
                          :class="{ active: form.icon === icon }"
                          @click="selectIcon(icon)"
                        >
                          <el-icon><component :is="icon" /></el-icon>
                          <span>{{ icon }}</span>
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="文档" name="document">
                      <div class="icon-grid">
                        <div 
                          v-for="icon in documentIcons" 
                          :key="icon"
                          class="icon-item"
                          :class="{ active: form.icon === icon }"
                          @click="selectIcon(icon)"
                        >
                          <el-icon><component :is="icon" /></el-icon>
                          <span>{{ icon }}</span>
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="媒体" name="media">
                      <div class="icon-grid">
                        <div 
                          v-for="icon in mediaIcons" 
                          :key="icon"
                          class="icon-item"
                          :class="{ active: form.icon === icon }"
                          @click="selectIcon(icon)"
                        >
                          <el-icon><component :is="icon" /></el-icon>
                          <span>{{ icon }}</span>
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="其他" name="other">
                      <div class="icon-grid">
                        <div 
                          v-for="icon in otherIcons" 
                          :key="icon"
                          class="icon-item"
                          :class="{ active: form.icon === icon }"
                          @click="selectIcon(icon)"
                        >
                          <el-icon><component :is="icon" /></el-icon>
                          <span>{{ icon }}</span>
                        </div>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                  <div class="icon-actions">
                    <el-button size="small" @click="clearIcon">清除图标</el-button>
                  </div>
                </div>
              </el-popover>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="显示排序" prop="orderNum">
              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" v-if="form.menuType != 'F'">
            <el-form-item label="是否外链">
              <el-radio-group v-model="form.isFrame">
                <el-radio label="0">是</el-radio>
                <el-radio label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menuType != 'F'">
            <el-form-item label="路由地址" prop="path">
              <el-input v-model="form.path" placeholder="请输入路由地址" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" v-if="form.menuType == 'C'">
            <el-form-item label="组件路径" prop="component">
              <el-input v-model="form.component" placeholder="请输入组件路径" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menuType != 'M'">
            <el-form-item label="权限字符" prop="perms">
              <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" v-if="form.menuType == 'C'">
            <el-form-item label="是否缓存">
              <el-radio-group v-model="form.isCache">
                <el-radio label="0">缓存</el-radio>
                <el-radio label="1">不缓存</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menuType != 'F'">
            <el-form-item label="显示状态">
              <el-radio-group v-model="form.visible">
                <el-radio label="1">显示</el-radio>
                <el-radio label="0">隐藏</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" v-if="form.menuType != 'F'">
            <el-form-item label="菜单状态">
              <el-radio-group v-model="form.status">
                <el-radio label="1">正常</el-radio>
                <el-radio label="0">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance } from 'vue';
import { listMenu, getMenu, delMenu, addMenu, updateMenu } from '@/api/system/menu';
import { ElMessage, ElMessageBox } from 'element-plus';

defineOptions({
  name: 'MenuManagement',
});

const { proxy } = getCurrentInstance() as any;

const loading = ref(true);
const showSearch = ref(true);
const menuList = ref<any[]>([]);
const menuOptions = ref<any[]>([]);
const title = ref('');
const open = ref(false);
const isExpandAll = ref(false);
const refreshTable = ref(true);

const queryParams = ref<any>({
  menuName: undefined,
  status: undefined,
});

const form = ref<any>({});

const rules = {
  menuName: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
  orderNum: [{ required: true, message: '菜单顺序不能为空', trigger: 'blur' }],
  path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
};

const queryFormRef = ref();
const formRef = ref();

// 图标选择器相关
const activeIconTab = ref('system');
const iconPopoverVisible = ref(false);

// Element Plus 图标库 - 系统图标
const systemIcons = [
  'Plus', 'Minus', 'CirclePlus', 'Search', 'Female', 'Male', 'Aim', 'House',
  'FullScreen', 'Loading', 'Link', 'Service', 'Pointer', 'Star', 'Notification',
  'Connection', 'ChatDotRound', 'Setting', 'Clock', 'Position', 'Discount',
  'Odometer', 'ChatSquare', 'ChatRound', 'ChatLineRound', 'ChatLineSquare',
  'ChatDotSquare', 'View', 'Hide', 'Unlock', 'Lock', 'RefreshRight', 'RefreshLeft',
  'Refresh', 'Bell', 'MuteNotification', 'User', 'Check', 'CircleCheck', 'Warning',
  'CircleClose', 'Close', 'PieChart', 'More', 'Compass', 'Filter', 'Switch',
  'Select', 'SemiSelect', 'CloseBold', 'EditPen', 'Edit', 'Message', 'MessageBox',
  'TurnOff', 'Finished', 'Delete', 'Crop', 'SwitchButton', 'Operation', 'Open',
  'Remove', 'ZoomOut', 'ZoomIn', 'InfoFilled', 'CircleCheckFilled', 'SuccessFilled',
  'WarningFilled', 'CircleCloseFilled', 'QuestionFilled', 'WarnTriangleFilled',
  'UserFilled', 'MoreFilled', 'Tools', 'HomeFilled', 'Menu', 'UploadFilled',
  'Avatar', 'HelpFilled', 'Share', 'StarFilled', 'Comment', 'Histogram', 'Grid',
  'Promotion', 'DeleteFilled', 'RemoveFilled', 'CirclePlusFilled',
  'ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeftBold', 'ArrowUpBold',
  'ArrowRightBold', 'ArrowDownBold', 'DArrowRight', 'DArrowLeft', 'Download', 'Upload',
  'Top', 'Bottom', 'Back', 'Right', 'TopRight', 'TopLeft', 'BottomRight', 'BottomLeft',
  'Sort', 'SortUp', 'SortDown', 'Rank', 'CaretLeft', 'CaretTop', 'CaretRight',
  'CaretBottom', 'DCaret', 'Expand', 'Fold',
];

// 文档图标
const documentIcons = [
  'DocumentAdd', 'Document', 'Notebook', 'Tickets', 'Memo', 'Collection', 'Postcard',
  'ScaleToOriginal', 'SetUp', 'DocumentDelete', 'DocumentChecked', 'DataBoard',
  'DataAnalysis', 'CopyDocument', 'FolderChecked', 'Files', 'Folder', 'FolderDelete',
  'FolderRemove', 'FolderOpened', 'DocumentCopy', 'DocumentRemove', 'FolderAdd',
  'FirstAidKit', 'Reading', 'DataLine', 'Management', 'Checked', 'Ticket', 'Failed',
  'TrendCharts', 'List',
];

// 媒体图标
const mediaIcons = [
  'Microphone', 'Mute', 'Mic', 'VideoPause', 'VideoCamera', 'VideoPlay', 'Headset',
  'Monitor', 'Film', 'Camera', 'Picture', 'PictureRounded', 'Iphone', 'Cellphone',
  'VideoCameraFilled', 'PictureFilled', 'Platform', 'CameraFilled', 'BellFilled',
  'Location', 'LocationInformation', 'DeleteLocation', 'Coordinate', 'Bicycle',
  'OfficeBuilding', 'School', 'Guide', 'AddLocation', 'MapLocation', 'Place',
  'LocationFilled', 'Van',
];

// 其他图标
const otherIcons = [
  'Watermelon', 'Pear', 'NoSmoking', 'Smoking', 'Mug', 'GobletSquareFull', 'GobletFull',
  'KnifeFork', 'Sugar', 'Bowl', 'MilkTea', 'Lollipop', 'Coffee', 'Chicken', 'Dish',
  'IceTea', 'ColdDrink', 'CoffeeCup', 'DishDot', 'IceDrink', 'IceCream', 'Dessert',
  'IceCreamSquare', 'ForkSpoon', 'IceCreamRound', 'Food', 'HotWater', 'Grape', 'Fries',
  'Apple', 'Burger', 'Goblet', 'GobletSquare', 'Orange', 'Cherry',
  'Printer', 'Calendar', 'CreditCard', 'Box', 'Money', 'Refrigerator', 'Cpu', 'Football',
  'Brush', 'Suitcase', 'SuitcaseLine', 'Umbrella', 'AlarmClock', 'Medal', 'GoldMedal',
  'Present', 'Mouse', 'Watch', 'QuartzWatch', 'Magnet', 'Help', 'Soccer', 'ToiletPaper',
  'ReadingLamp', 'Paperclip', 'MagicStick', 'Basketball', 'Baseball', 'Coin', 'Goods',
  'Sell', 'SoldOut', 'Key', 'ShoppingCart', 'ShoppingCartFull', 'ShoppingTrolley',
  'Phone', 'Scissor', 'Handbag', 'ShoppingBag', 'Trophy', 'TrophyBase', 'Stopwatch',
  'Timer', 'CollectionTag', 'TakeawayBox', 'PriceTag', 'Wallet', 'Opportunity',
  'PhoneFilled', 'WalletFilled', 'GoodsFilled', 'Flag', 'BrushFilled', 'Briefcase',
  'Stamp', 'Sunrise', 'Sunny', 'Ship', 'MostlyCloudy', 'PartlyCloudy', 'Sunset',
  'Drizzling', 'Pouring', 'Cloudy', 'Moon', 'MoonNight', 'Lightning',
  'ChromeFilled', 'Eleme', 'ElemeFilled', 'ElementPlus', 'Shop', 'SwitchFilled', 'WindPower',
];

// 选择图标
function selectIcon(icon: string) {
  form.value.icon = icon;
  // 选择后关闭弹出层
  iconPopoverVisible.value = false;
}

// 清除图标
function clearIcon() {
  form.value.icon = '#';
  // 清除后关闭弹出层
  iconPopoverVisible.value = false;
}

// 时间格式化函数
function parseTime(time: any) {
  if (!time) return '';
  const date = new Date(time);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

function getList() {
  loading.value = true;
  listMenu(queryParams.value)
    .then((response: any) => {
      menuList.value = proxy.handleTree(response.data, 'menuId');
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
}

function getTreeselect() {
  menuOptions.value = [];
  listMenu().then((response: any) => {
    const menu = { menuId: 0, menuName: '主类目', children: [] };
    menu.children = proxy.handleTree(response.data, 'menuId');
    menuOptions.value.push(menu);
  });
}

function cancel() {
  open.value = false;
  reset();
}

function reset() {
  form.value = {
    menuId: undefined,
    parentId: 0,
    menuName: undefined,
    icon: 'Folder', // 默认图标（目录）
    menuType: 'M',
    orderNum: 0,
    isFrame: '1',
    isCache: '0',
    visible: '1', // 默认显示
    status: '1', // 默认正常
  };
  formRef.value?.resetFields();
}

function handleMenuTypeChange(value: string | number | boolean | undefined) {
  // 根据菜单类型设置默认图标
  if (!form.value.icon || form.value.icon === '#') {
    switch (value) {
      case 'M': // 目录
        form.value.icon = 'Folder';
        break;
      case 'C': // 菜单
        form.value.icon = 'Document';
        break;
      case 'F': // 按钮
        form.value.icon = '#';
        break;
    }
  }
}

function handleQuery() {
  getList();
}

function resetQuery() {
  queryFormRef.value?.resetFields();
  handleQuery();
}

function handleAdd(row?: any) {
  reset();
  getTreeselect();
  if (row != null && row.menuId) {
    form.value.parentId = row.menuId;
  } else {
    form.value.parentId = 0;
  }
  open.value = true;
  title.value = '添加菜单';
}

function toggleExpandAll() {
  refreshTable.value = false;
  isExpandAll.value = !isExpandAll.value;
  setTimeout(() => {
    refreshTable.value = true;
  }, 0);
}

function handleUpdate(row: any) {
  reset();
  getTreeselect();
  getMenu(row.menuId).then((response: any) => {
    form.value = response.data;
    open.value = true;
    title.value = '修改菜单';
  });
}

function submitForm() {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      if (form.value.menuId != undefined) {
        updateMenu(form.value).then(() => {
          ElMessage.success('修改成功');
          open.value = false;
          getList();
        });
      } else {
        addMenu(form.value).then(() => {
          ElMessage.success('新增成功');
          open.value = false;
          getList();
        });
      }
    }
  });
}

function handleDelete(row: any) {
  ElMessageBox.confirm('是否确认删除名称为"' + row.menuName + '"的数据项？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(function () {
      return delMenu(row.menuId);
    })
    .then(() => {
      getList();
      ElMessage.success('删除成功');
    });
}

getList();
</script>

<style scoped lang="scss">
@use '@/styles/common.scss';

// 优化搜索表单间距
.el-form {
  margin-bottom: 8px;
  
  .el-form-item {
    margin-bottom: 12px;
  }
}

// 优化按钮组间距
.el-row.mb8 {
  margin-bottom: 8px;
}

// 彻底清除 Element Plus 默认样式
:deep(.el-row) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin: 0 !important;
  
  .el-col {
    padding-right: 0 !important;
  }
}

// 覆盖所有可能的 Element Plus 默认 gutter 样式
:deep(.el-row[style*="margin-left"]) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

// 优化对话框表单间距
:deep(.el-dialog) {
  .el-form {
    .el-form-item {
      margin-bottom: 22px; // 增加底部间距以容纳错误信息
      
      // 当有错误信息时，调整间距
      &.is-error {
        margin-bottom: 24px;
        
        .el-form-item__error {
          margin-top: 2px;
          font-size: 12px;
          line-height: 1.2;
          padding: 0;
        }
      }
      
      // 当没有错误信息时，保持紧凑间距
      &:not(.is-error) {
        margin-bottom: 18px;
      }
    }
    
    .el-row {
      margin-bottom: 0;
      
      .el-col {
        padding-left: 8px;
        padding-right: 8px;
        
        &:first-child {
          padding-left: 0;
        }
        
        &:last-child {
          padding-right: 0;
        }
      }
    }
  }
  
  .el-dialog__body {
    padding: 20px 20px 0 20px;
  }
  
  .el-dialog__footer {
    padding: 10px 20px 20px 20px;
    text-align: right;
    
    .el-button + .el-button {
      margin-left: 8px;
    }
  }
}

// 图标选择器样式
.icon-selector {
  width: 100%;
  height: 450px;
  background: #fff;
  display: flex;
  flex-direction: column;
  
  
  :deep(.el-tabs) {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    position: relative;
    z-index: 1;
  }
  
  :deep(.el-tabs__content) {
    flex: 1;
    overflow: hidden;
    background: #fff;
    position: relative;
    z-index: 1;
  }
  
  :deep(.el-tab-pane) {
    height: 100%;
    overflow: hidden;
    background: #fff;
    position: relative;
    z-index: 1;
  }
  
  .icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    background: #fff;
    position: relative;
    z-index: 2;
    
    // 自定义滚动条样式
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-thumb {
      background-color: #d0d0d0;
      border-radius: 3px;
      
      &:hover {
        background-color: #b0b0b0;
      }
    }
    
    &::-webkit-scrollbar-track {
      background-color: #f5f5f5;
    }
    
    .icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px 8px;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
      background-color: #fff;
      position: relative;
      z-index: 3;
      
      &:hover {
        border-color: var(--el-color-primary);
        background-color: var(--el-color-primary-light-9);
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
      
      &.active {
        border-color: var(--el-color-primary);
        background-color: var(--el-color-primary-light-9);
        box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
      }
      
      .el-icon {
        font-size: 24px;
        margin-bottom: 6px;
        color: #606266;
      }
      
      span {
        font-size: 11px;
        color: #909399;
        text-align: center;
        word-break: break-all;
        line-height: 1.2;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
  
  .icon-actions {
    display: flex;
    justify-content: flex-end;
    padding: 12px;
    border-top: 1px solid #e0e0e0;
    background: #fff;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
  }
}

// 图标选择器弹出框样式
:deep(.icon-selector-popover) {
  padding: 0 !important;
  z-index: 9999 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid #e4e7ed !important;
  background: #fff !important;
  height: 500px !important;
  width: 600px !important;
  overflow: hidden !important;
  
  
  .el-popper__arrow {
    display: none !important;
  }
  
  .el-tabs {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    position: relative;
    z-index: 1;
    
    .el-tabs__header {
      margin: 0 !important;
      padding: 12px 12px 0 12px !important;
      background-color: #f5f7fa !important;
      border-bottom: 1px solid #e4e7ed !important;
      flex-shrink: 0 !important;
      position: relative;
      z-index: 2;
    }
    
    .el-tabs__content {
      padding: 0 !important;
      background: #fff !important;
      flex: 1 !important;
      overflow: hidden !important;
      position: relative;
      z-index: 1;
    }
  }
}


</style>
